<template>
  <div class="w-[98%] p-20px">
    <div style="margin-bottom: 10px">
      <el-select style="width: 100px" v-model="filter.handleUserNo" placeholder="处理人" clearable filterable>
        <el-option v-for="item in userList" :label="item.label" :key="item.value"
                   :value="item.value"></el-option>
      </el-select>
      <el-select style="width: 100px" v-model="filter.handleStatus" placeholder="处理状态" clearable>
        <el-option v-for="item in getEnumBySn('handleStatusEnum')" :label="item.label" :key="item.value"
                   :value="item.value"></el-option>
      </el-select>
      <el-select style="width: 100px" v-model="filter.priority" placeholder="优先级" clearable>
        <el-option v-for="item in getEnumBySn('priority')" :label="item.label" :key="item.value"
                   :value="item.value"></el-option>
      </el-select>
      <el-select style="width: 100px;margin-left: 10px" v-model="filter.indexId" placeholder="合作编号" filterable clearable>
        <el-option v-for="item in agencyList" :label="item.label" :key="item.id"
                   :value="item.value"></el-option>
      </el-select>
      <el-select style="width: 100px;margin-left: 10px" v-model="filter.chargeFlag" placeholder="客户类型" clearable>
        <el-option v-for="item in getEnumBySn('chargeFlag')" :label="item.label" :key="item.value"
                   :value="item.value"></el-option>
      </el-select>

      <el-input style="width: 130px;margin-left: 10px" v-model="filter.customName" placeholder="客户姓名" clearable></el-input>

      <el-select style="width: 80px;margin-left: 10px" v-model="filter.sex" placeholder="性别" clearable>
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>

      <el-input style="width: 130px;margin-left: 10px" v-model="filter.debtType" placeholder="处理平台" clearable>

      </el-input>
      <el-select style="width: 100px;margin-left: 10px" v-model="filter.deliverFlag" placeholder="是否交付" clearable>
        <el-option v-for="item in getEnumBySn('deliverFlag')" :label="item.label" :key="item.value"
                   :value="item.value"></el-option>
      </el-select>
      <el-select style="width: 100px;margin-left: 10px" v-model="filter.hasGroupFlag" placeholder="是否有群" clearable>
        <el-option v-for="item in getEnumBySn('Yes_No')" :label="item.label" :key="item.value"
                   :value="item.value"></el-option>
      </el-select>
      <el-select style="width: 130px;margin-left: 10px" v-model="filter.receivePhone" placeholder="群名手机号" clearable filterable>
        <el-option v-for="item in phoneList" :label="item.label" :key="item.value"
                   :value="item.value"></el-option>
      </el-select>
      <el-date-picker style="width: 140px" value-format="YYYY-MM-DD" v-model="filter.receiveDate"
                      placeholder="选择日期时间" ></el-date-picker>
      <el-button style="margin-left: 10px" type="primary" @click="fetchData">查询</el-button>
      <el-button style="margin-left: 10px" type="success" @click="addHandle">新增</el-button>
    </div>


    <el-table :data="tableData" style="width: 100%" border stripe :show-overflow-tooltip="true">
      <el-table-column label="序号" width="60" align="center">
        <template #default="{ $index }">
          {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
        </template>
      </el-table-column>
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
        :width="column.width" :align="column.align"></el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template v-slot="scope">
          <el-button @click="editHandle(scope.row)" size="mini" type="primary">编辑</el-button>
          <el-button @click="materialHandle(scope.row)" size="mini" type="success">资料</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalItems" @current-change="currentChange"
      background layout="total,prev, pager, next" class="pagination" prev-text="上一页" next-text="下一页"></el-pagination>
    <Modal ref="modalRef" @ok="okHandle" />
    <Material ref="materialRef" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import Modal from "./modal.vue"
import Material from "./NegotiateMaterial.vue"
import {getEnumBySn, getIndexIdList, getLabelByValue, getPhoneList, getUserList} from "@/api/enums";
import request from '@/config/axios'

const filter = ref({
  gender: '',
  trusteeshipType: ""
});
const modalRef = ref();
const tableData = ref([{}])
const agencyList = ref([])
const materialRef = ref();

const columns = ref([
  { prop: 'priorityName', label: '优先级', width: '100', align: 'center' },
  { prop: 'chargeFlag', label: '客户类型', width: '100', align: 'center' },
  { prop: 'handleUserNo', label: '处理人', width: '100', align: 'center' },
  { prop: 'receiveDate', label: '接单日期', width: '120', align: 'center' },
  { prop: 'handleStatus', label: '处理状态', width: '100', align: 'center' },
  { prop: 'indexId', label: '合作编号', width: '90', align: 'center' },
  { prop: 'customName', label: '客户姓名', width: '100', align: 'center' },
  { prop: 'sex', label: '性别', width: '100', align: 'center' },
  { prop: 'debtType', label: '处理平台', width: '100', align: 'center' },
  { prop: 'appeal', label: '诉求', width: '120', align: 'center' },
  { prop: 'handleProcessMemo', label: '最新处理情况', width: '130', align: 'center' },
  { prop: 'lastHandleTime', label: '最后处理时间', width: '120', align: 'center' },
  { prop: 'deliverFlag', label: '是否交付', width: '100', align: 'center' },
  { prop: 'hasGroupFlag', label: '是否有群', width: '100', align: 'center' },
  { prop: 'receivePhone', label: '群名手机号', width: '120', align: 'center' },
  { prop: 'comePhone', label: '进线手机号', width: '120', align: 'center' },
  { prop: 'memo', label: '备注', align: 'center' },
]);

const totalItems = ref(0);
const currentPage = ref(1);
const pageSize = ref(15);
const currentItem = ref({});

fetchData()
const currentChange = (v) => {
  currentPage.value = v
  fetchData()
}

async function fetchData() {
  const response = await request.get({
    url: '/negotiation/list',
    params: { ...filter.value, current: currentPage.value, size: pageSize.value }
  })
  tableData.value = response.records?.map(item => ({
    ...item,
    priorityName: getLabelByValue('priority', item.priority),
  }))
  totalItems.value = response.total
  currentPage.value = response.current
}

const okHandle = () => {
  fetchData()
}

const addHandle = () => {
  modalRef.value?.add()
}
const editHandle = (rowData) => {
  modalRef.value?.edit(rowData)
  currentItem.value = rowData
}

const materialHandle = (rowData) => {
  materialRef.value?.open(rowData)
}
const userList  = ref([])
const phoneList = ref([])
const fetchOptions = function () {
  getIndexIdList().then(res => {
    agencyList.value = res
  })
  getUserList().then(res => {
    userList.value = res
  })
  getPhoneList().then(res => {
    phoneList.value = res
  })
}
//页面挂载
onMounted(() => {
  fetchOptions()
  fetchData()
});
</script>

<style scoped>
.filter-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-section>* {
  margin-right: 10px;
}

.pagination {
  margin-top: 20px;
  float: right;
  font-size: 22px;
}

.drawer-footer {
  text-align: right;
  margin-top: 20px;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
}

.form-inline .el-form-item {
  margin-right: 20px;
}
</style>
